WardrobeSystemDocs
Wardrobe System - Complete Developer Documentation
📋 What Is This Project?
The Wardrobe System is a fully functional, plug-and-play clothing and outfit management system for Unreal Engine. It allows players to interact with a wardrobe, change individual clothing pieces (head, upper body, lower body, shoes, or more! YES! you can have more slots or even less slots, and the system adapts to your choice! saving both performance and your precious time!), switch complete outfits, and see their character react with animations when trying on clothes.
Key Features:
✅ Modular Clothing System - The count of Skeletal Mesh Component is up to you
✅ Pre-Made Outfits - Create and equip complete outfit sets instantly
✅ Interactive Wardrobe Trigger - 3D wardrobe prop with collision-based interaction
✅ Cinematic Camera - Smooth camera transition when entering wardrobe mode
✅ (BONUS) Character Reaction Animations - Characters play animations when trying on clothes
✅ UI Widget System - Automatically adapts to how much "Wardrobe Groups" you have!
✅ Data-Driven Architecture - All clothing and outfits are defined using Data Assets
✅ UE4 & UE5 Mannequin Support - Includes example clothing for both skeleton types
✅ MetaHuman Compatible - Example character blueprint supports MetaHuman meshes
🎯 What Can You Do With It?
- Add wardrobe functionality to your game characters
- Create clothing stores, dressing rooms, or character customization systems
- Build fashion games, RPGs with equipment systems, or social simulation games
- Extend it with save/load systems, multiplayer synchronization, or shopping mechanics
📂 Project Structure Overview
SimpleSeries/Wardrobe/
├── Blueprints/
│ ├── AC_SimpleWardrobe.uasset // Main wardrobe component
│ ├── BP_WardrobeTrigger.uasset // Interactive wardrobe actor
│ ├── Data/ // Data Asset base classes
│ │ ├── PDA_ClothPieceData // Individual clothing item
│ │ ├── PDA_ClothingGroup // Collection of clothing items
│ │ └── PDA_OutfitData // Complete outfit definition
│ ├── Game/
│ │ ├── BP_TPC_WC.uasset // UE4 Mannequin character example
│ │ └── BP_TPC_MH_WC.uasset // MetaHuman character example
│ └── Widgets/
│ ├── WB_WardrobeSelect // Main wardrobe UI
│ ├── WB_ClothingGroupSlot // Clothing category button
│ └── WB_OutfitSlot // Outfit button
├── Clothes/
│ ├── Data/ // All clothing data assets
│ │ ├── Items/ // Individual clothing pieces
│ │ ├── Outfits/ // Pre-made outfit combinations
│ │ └── WardrobeGroups/ // Clothing collections by category
│ └── UE4/ // Skeletal meshes for clothing
├── Animations/
│ └── Data/ // Character reaction animations
└── Maps/
└── LVL_WardrobeDemo.umap // Demo level
🚀 Quick Start Guide - Using the System
Few things to keep in mind. If you don't wanna read the whole doc,
just read and internalize this.
If you're already advanced in Blueprints,
you'd get the whole system immediately just from this.
- I'd recommend you to play around the level, and check out all the possibilities with the Placeholder Assets I've prepared for this demo first
- "Cloth Piece" Data Asset is the Building block of All Clothes. It consists of 3 variables, the most important of them; "DesignatedTag" bcs this has to match with the "ComponentTag" of your Skeletal Mesh Component in your CharacterBP
- "WardrobeGroups" Data Asset consists of "ClothPiece" Data assets with the same "DesignatedTag"
- And "Outfits" are just a set of "Cloth Piece" Data, each with unique "DesignatedTag"
- Widgets that are shown are modular and are based on the same building blocks
- Every variable that concerns you as devs are in the "SETUP" or "DevTools" category
- There are comments and a lot of variables have tooltips to help you understand everything better
That's it! Simple, right?
If you're a beginner, don't worry, I have this whole doc prepared, just for you :D
Don't be intimidated, you're very welcome to read the whole thing carefully :)
I mean, If you're like me... you can always dive in head-first and experiment,
maybe come back here when you break things, lol
And if you're lost, just hmu on Discord :D
Good Luck with your Project!
🛠️ Step-by-Step Customization Guide
PART 1: Adding the Wardrobe to Your Character
Option A: Use the Provided Example Character
-
Find the character blueprints:
- For UE4 Mannequin:/Game/SimpleSeries/Wardrobe/Blueprints/Game/BP_TPC_WC
- For MetaHuman:/Game/SimpleSeries/Wardrobe/Blueprints/Game/BP_TPC_MH_WC -
Set it as your player character:
- Open your Game Mode blueprint
- Set Default Pawn Class to one of the character blueprints above
Option B: Add Wardrobe to Your Existing Character
Prerequisites:
- Your character must have a main Skeletal Mesh Component
- Your character must use a Character Blueprint (derived from
Characterclass)
Steps:
-
Open your character blueprint
-
Add the Wardrobe Component:
- In the Components panel, click Add Component
- Search forAC_SimpleWardrobe
- Add it to your character -
Add Skeletal Mesh Components for clothing slots:
- Add 4 Skeletal Mesh Components as children of your main character mesh
- Name them whatever you want, for example :
-Head
-UpperBody
-LowerBody
-Shoes
- Set each component's Component Tags to match their name (e.g., Head component gets "head" tag)
- Set their Leader Pose Component to your main character mesh in the Construction Script
- Set Skeletal Mesh Asset toNone(clothing will be assigned at runtime)
-
Configure the Wardrobe Component:
Select the AC_SimpleWardrobe component and checkout the "SETUP" section:
| WardrobeModeNeedsTriggerBP? | True = Needs BP_WardrobeTrigger on the level, False = You can access it anytime |
|---|---|
| WardrobeModeEnabled? | True = Enables the wardrobe system False = Disables it |
| OutfitMode? | Outfit & Wardrobe Groups = uses both Wardrobe Groups = Individual Clothing Selections Outfits Only = Pre-Made Clothing Selections |
| Wardrobe Groups | Put your ClothPiece Collection here |
| Outfits | Put your Outfits here |
| ReactionAnims | Open the Data Asset to customize it |
| RandomizeOutfitOnSpawn? | Based on the Array of "Outfits" you've added |
These Variables have their Tooltips too, so you can check them out :)
- Assign Clothing Collections (Wardrobe Groups):
There are 4 Groups, bcs I've setup 4 Skeletal Meshes, but it doesn't have to be 4. it can be Less and More. However many you've put your Skeletal Meshes on your character, the Wardrobe Groups would recognize it as long as you have assigned its tag :)
To create your own Wardrobe Group : Just duplicate one of the DA in /Game/SimpleSeries/Wardrobe/Clothes/Data/WardrobeGroups/
Alright, All these Data Assets hold a specific type of Data Assets called "ClothPiece"
And its from /Game/SimpleSeries/Wardrobe/Clothes/Data/Items/
Pay attention to "DesignatedTag", Because an Ideal "WardrobeGroup" Data asset is the one containing "ClothPiece" Data Assets with the exact same "DesignatedTag"
- Assign Pre-Made Outfits:
In the Outfits array, add outfit data assets:
- /Game/SimpleSeries/Wardrobe/Clothes/Data/Outfits/
- Add more from the Outfits folder as needed
To Create your own outfit, just duplicate any Outfit data Asset, and add your own "ClothPiece" items onto the array. You can add multiple items of different "DesignatedTag".
If you add multiple items with the same tag, though... the system would just replace the previously applied with the last one... soo it's a redundant thing to do.
- Setup Input (if not using BP_WardrobeTrigger):
If you want to open the wardrobe directly without a trigger actor:
- Set WardrobeModeNeedsTriggerBP? to False
- In your character's Event Graph, call the custom event:
Wardrobe Interact! (on AC_SimpleWardrobe component)
PART 2: Adding the Wardrobe Trigger Actor to Your Level
The BP_WardrobeTrigger is a physical wardrobe prop that players can interact with.
-
Drag the wardrobe into your level:
- Open your level
- Navigate to:/Game/SimpleSeries/Wardrobe/Blueprints/BP_WardrobeTrigger
- Drag it into your level -
Position the wardrobe:
- The wardrobe includes a placement guide arrow (visible in editor only)
- Position your player character where the arrow points for proper camera framing -
Configure the wardrobe actor:
| UseWardrobeMesh? | Shows the wardrobe 3D model |
|---|---|
| LerpRotationOnly? | Only rotates player, doesn't move them |
-
How it works:
- Players walk into the sphere collision (green sphere in editor)
- A 3D widget button appears prompting "Press E to interact"
- Pressing E opens the wardrobe UI and transitions the camera -
Customization options:
- Change the mesh: Assign a different Static Mesh to theWardrobecomponent
- Change interaction key: Modify theIA_InteractInput Action
- Adjust collision range: Scale theTRIGGER(SphereComponent)
- Modify camera angle: Adjust theCineCameracomponent's transform
PART 3: Creating Your Own Clothing Items
Step 1: Prepare Your Skeletal Mesh
- Import your clothing mesh into Unreal Engine
- Ensure it uses the same skeleton as your character (e.g., UE5_Mannequin_Skeleton)
- Save it in:
/Game/SimpleSeries/Wardrobe/Clothes/(or your own folder)
Step 2: Create a Clothing Data Asset
- Navigate to:
/Game/SimpleSeries/Wardrobe/Clothes/Data/Items/ - Duplicate the
DA_ClothPieceData - Name it:
DA_YourClothingName(e.g.,DA_Jacket_Leather) - Open the new Data Asset and configure:
| SkeletalMesh | (Your imported mesh) it ideally should use the same skeleton as your CharacterBP | The SKM designated to the SKM in your CharacterBP |
|---|---|---|
| DesignatedTag | head? lower? earrings? gloves? | Which body slot this clothing occupies |
| ItemName | This is What the player sees | Display name for the item |
So the Tag, would be what is displayed in the Widget, (there's a code that sets the 1st letter to be uppercase so) we as developers can just focus on making sure the DesignatedTag is matching with the Designated Skeletal Mesh on your CharacterBP
And the "ItemName" Would be the actual text that would be displayed on the Selector widget. So We gotta name it like how we'd want the players to see it :)
Step 3: Add Your Clothing to a Collection (Wardrobe Groups)
-
Open a Wardrobe Group Data Asset:
-/Game/SimpleSeries/Wardrobe/Clothes/Data/WardrobeGroups/DA_(YourGroup)
- (If you made your own WardrobeGroup Data, don't forget to put it here) : -
Add your clothing:
- Expand ClothItems → ClothingItems array
- Click + to add a new element
- Add your newDA_YourClothingNamedata asset
Your clothing will now appear in the wardrobe UI!
PART 4: Creating Pre-Made Outfits
Outfits allow players to equip a complete set of clothing with one click.
-
Navigate to:
/Game/SimpleSeries/Wardrobe/Clothes/Data/Outfits/ -
Duplicate one of the Data in there "DA_OutfitDefaultData"
-
Name it:
DA_Outfit_YourOutfitName(e.g.,DA_Outfit_CasualLook) -
Open it and add
ClothPiece Data Assets(Click the plus Icon to add more) you can also remove so you'd have less items. Just remember that when the outfit is selected, it will remove every equipped ClothPiece and replace it with just whatever is inside this Outfit Data -
Add the outfit to your character:
- Open your character blueprint
- Find theAC_SimpleWardrobecomponent
- In the Outfits array, add your new outfit data asset
PART 5: UI Overview
The wardrobe UI is located at:
/Game/SimpleSeries/Wardrobe/Blueprints/Widgets/WB_WardrobeSelect
-
The displayed widget is WB_WardrobeSelect
-
Appearance:
- Change colors, fonts, sizes in the Designer tab
- The UI uses a ScrollBox for browsing clothing items
- Outfit buttons are at the top in a VerticalBox -
Key widgets:
- WB_ClothingGroupSlot: Individual clothing item buttons (auto-generated)
- WB_OutfitSlot: Pre-made outfit buttons (auto-generated)
To change button textures:
- Navigate to:
/Game/SimpleSeries/Wardrobe/Blueprints/Widgets/Textures/ - Replace
T_UiTexture_01orT_UIScrollThumbwith your own textures
PART 6: Adding Character Reaction Animations
Characters can play animations when trying on clothes (e.g., a spin, pose, or happy reaction).
-
Create or import your animation montages (must be compatible with your character's skeleton)
-
Navigate to:
/Game/SimpleSeries/Wardrobe/Animations/Data/ -
Create a new Data Asset:
- Duplicate this Data Asset if you're on UE5, the left is for UE4
- Name it whatever you'd like to name it:DA_MyReactionAnims
- Open it and Start Adding your own Anim Montages, for each reaction type -
Assign to your character:
- Open your character blueprint
- Select theAC_SimpleWardrobecomponent
- Set ReactionAnims to your new data asset
Animation Tags:
The system automatically selects reactions based on clothing tags:
head→ Plays head-specific reactionupper→ Plays upper body reactionlower→ Plays lower body reactionshoes→ Plays shoes reaction
PART 7: Integration with Your Game
Saving/Loading Outfits
The wardrobe component stores the current outfit in:
- CurrentlyEquippedOutfit (array of PDA_ClothPieceData)
To implement save/load:
- Create a Save Game object that stores this array
- On save:
- Get reference toAC_SimpleWardrobecomponent
- Copy the CurrentlyEquippedOutfit array to your save game - On load:
- For each clothing piece in the saved array, call:
Change Cloth Piece (on AC_SimpleWardrobe)
Personally I've never tried it, but theoretically, it should work, Just remember that the only variable to be concerned about by your save system is CurrentlyEquippedOutfit
Yeaa I know, it's only a wardrobe system and I'm not obligated to help with the save system. But naah, I gotta take into account for the possibility of expansion.
I want this project to be a solid building block for your game :D
PART 8: Animation Blueprint
- Open your own ABP, and see where you last play the montage 'SlotDefaultSlot'
- put a "LinkedAnimGraph" Node just right before it Class (ABP_Wardrobe)
Networking (Multiplayer)
The wardrobe component is not replicated by default. To add multiplayer support:
-
Make AC_SimpleWardrobe replicated:
- OpenAC_SimpleWardrobe
- Set Component Replicates toTrue
- Mark CurrentlyEquippedOutfit asReplicated -
Call wardrobe functions on the server:
- WrapChange Cloth Piececalls in a Server RPC
- Use Multicast to update all clients
Well, it's really not that simple ofc, and no, I won't be responsible in helping you to make it replicated properly. This asset is currently intended for Single-Player only. But don't lemme stop you :D
Randomizing Outfits
The component has a built-in randomization feature, And you can use this feature for NPCs, or Other Supporting Character. Not loading the whole wardrobe system would save on performance. :
At runtime:
- Call the custom event:
Randomize Outfit(on AC_SimpleWardrobe component)
On character spawn:
- Set RandomizeOutfitOnSpawn? to
Truein the component properties
🎨 System Architecture (For Developers)
Core Components:
Data Flow:
- Trigger calls
Wardrobe Interact!onAC_SimpleWardrobe - Component spawns
WB_WardrobeSelectUI widget - UI reads clothing from
Wardrobe GroupsandOutfitsarrays - Player clicks a clothing item button
- UI calls
Change Cloth PieceonAC_SimpleWardrobe - Component updates the appropriate skeletal mesh component
- Component plays a reaction animation based on the clothing tag
